<template>
  <el-form size="small">
    <el-form-item>
      <el-radio v-model="state.radioValue" :label="1">
        月，允许的通配符[, - * /]
      </el-radio>
    </el-form-item>

    <el-form-item>
      <el-radio v-model="state.radioValue" :label="2">
        周期从
        <el-input-number v-model="state.cycle01" :min="1" :max="11" /> -
        <el-input-number
          v-model="state.cycle02"
          :min="state.cycle01 ? state.cycle01 + 1 : 2"
          :max="12"
        />
        月
      </el-radio>
    </el-form-item>

    <el-form-item>
      <el-radio v-model="state.radioValue" :label="3">
        从
        <el-input-number v-model="state.average01" :min="1" :max="11" />
        月开始，每
        <el-input-number
          v-model="state.average02"
          :min="1"
          :max="12 - state.average01 || 0"
        />
        月月执行一次
      </el-radio>
    </el-form-item>

    <el-form-item>
      <el-radio v-model="state.radioValue" :label="4">
        指定
        <el-select
          clearable
          v-model="state.checkboxList"
          placeholder="可多选"
          multiple
          style="width: 100%"
        >
          <el-option v-for="item in 12" :key="item" :value="item">{{
            item
          }}</el-option>
        </el-select>
      </el-radio>
    </el-form-item>
  </el-form>
</template>
<script setup lang="ts">
import { ref, reactive, defineEmits, onMounted, watch, computed } from "vue";

const emit = defineEmits(["update"]);
const state: any = reactive({
  radioValue: 1,
  cycle01: 1,
  cycle02: 2,
  average01: 1,
  average02: 1,
  checkboxList: [],
  checkNum: null,
});
defineExpose({
  cycle01: state.cycle01,
  cycle02: state.cycle02,
  average01: state.average01,
  average02: state.average02,
  checkboxList: state.checkboxList,
});
const props: any = defineProps({
   check: {
    type: Function,
    required: true,
    default: () => {},
  },
  cron: {
    type: String,
    required: true,
  },
});
watch(
  ()=>props.check,
  (val) => {
    if(val){
 state.checkNum = val;
    }
  },
  {
    immediate: true,
    deep: true,
  },
);
const cycleTotal = computed(() => {
  const cycle01 = state.checkNum(state.cycle01, 0, 11);
  const cycle02 = state.checkNum(state.cycle02, cycle01 ? cycle01 + 1 : 2, 12);
  return cycle01 + "-" + cycle02;
});
const averageTotal = computed(() => {
  const average01 = state.checkNum(state.average01, 0, 11);
  const average02 = state.checkNum(state.average02, 1, 12 - average01 || 0);
  return average01 + "/" + average02;
});
const checkboxString = computed(() => {
  let str = state.checkboxList.join();
  return str == "" ? "*" : str;
});
// 单选按钮值变化时
const radioChange = () => {
  switch (state.radioValue) {
    case 1:
      emit("update", "month", "*");
      break;
    case 2:
      emit("update", "month", cycleTotal.value);
      break;
    case 3:
      emit("update", "month", averageTotal.value);
      break;
    case 4:
      emit("update", "month", checkboxString.value);
      break;
  }
};
// 周期两个值变化时
const cycleChange = () => {
  if (state.radioValue == "2") {
    emit("update", "month", cycleTotal.value);
  }
};
// 平均两个值变化时
const averageChange = () => {
  if (state.radioValue == "3") {
    emit("update", "month", averageTotal.value);
  }
};
// checkbox值变化时
const checkboxChange = () => {
  if (state.radioValue == "4") {
    emit("update", "month", checkboxString.value);
  }
};
watch(()=>state.radioValue, (val) => {
  radioChange();
},{
  deep: true
});
watch(()=>state.cycleTotal, (val) => {
  cycleChange();
});
watch(()=>state.averageTotal, (val) => {
  averageChange();
});
watch(()=>state.checkboxString, (val) => {
  checkboxChange();
});
</script>
